<template>
  <div>
    <search-list
      ref="crawlList"
      :api-url="$url.CrawlContentList"
      :option="searchOpt"
      :itemPerRow="5"
      @selection-change="selectionChange"
      :beforeQuery="beforeQuery"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="title" label="内容主题"></el-table-column>
      <el-table-column prop="author" label="作者"></el-table-column>
      <el-table-column prop="kind" label="内容类型">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['crawlSl'](scope.row.kind).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="预处理状态" prop="prepared">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['preparedSl'](scope.row.prepared).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="platform" label="平台">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['crawlPlatformSl'](scope.row.platform).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="operator" label="操作人"></el-table-column>
      <el-table-column prop="publishAt" label="发布时间"></el-table-column>
      <el-table-column prop="createdAt" label="创建时间"></el-table-column>
      <el-table-column align="center" min-width="100" prop="published" label="是否发布">
        <template slot-scope="scope">
          <div v-if="scope.row.published">已发布</div>
          <el-button type="primary" plain size="mini" v-else @click="publishItem(scope.row)">
            标记为发布
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280px">
        <template slot-scope="scope">
          <el-button type="text" @click="detail(scope.row)">
            查看原文
          </el-button>
          <a
            class="el-button el-button--text el-button--mini"
            :href="scope.row.videoUrl"
            v-if="scope.row.videoUrl"
            target="_blank"
          >
            <el-button type="text">查看视频</el-button>
          </a>
          <el-button type="text" @click="prepare(scope.row)" v-if="scope.row.prepared == 0">
            预处理
          </el-button>
          <el-button type="text" @click="edit(scope.row)" v-if="scope.row.prepared == 1">
            编辑发布
          </el-button>
          <el-button
            type="text"
            @click="showTask(scope.row)"
            v-if="scope.row.prepared == 1 && scope.row.kind == 1"
          >
            查看上传任务
          </el-button>
        </template>
      </el-table-column>
    </search-list>
    <el-dialog title="任务详情" :visible.sync="dialogVisible" @close="clear">
      <data-form
        :formConfig="formConfig"
        v-model="formData"
        ref="form"
        :rules="crawlRule"
      ></data-form>
      <span slot="footer" class="dialog-footer" v-show="formData.status == '失败'">
        <el-button size="normal" @click="dialogVisible = false">关 闭</el-button>
        <el-button size="normal" type="primary" @click="reCrawl">视频重爬</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import DataForm from 'comp/DynamicForm';
  import { FormRuleConf } from '@/config';
  export default {
    components: {
      DataForm,
    },
    data() {
      return {
        ...FormRuleConf.Crawl,
        dialogVisible: false,
        selectedData: [],
        formConfig: {
          inline: false,
          labelPosition: 'right',
          labelWidth: '',
          size: 'normal',
          statusIcon: true,
          disabled: false, // 表单是否可用
          id: '',
          formItemList: [
            {
              key: 'jobId',
              type: 'text',
              label: '任务ID：',
            },
            {
              key: 'status',
              type: 'text',
              label: '任务状态：',
            },
            {
              key: 'videoId',
              type: 'text',
              label: '视频ID：',
            },
            {
              key: 'creationTime',
              type: 'text',
              label: '创建时间：',
            },
            {
              key: 'completeTime',
              type: 'text',
              label: '完成时间：',
            },
            {
              key: 'filesize',
              type: 'text',
              label: '文件大小：',
            },
            {
              key: 'errMsg',
              type: 'text',
              label: '错误信息：',
            },
            {
              key: 'errCode',
              type: 'text',
              label: '错误代码：',
            },
          ],
        },
        formData: {},
        searchOpt: [
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'id',
            label: 'ID',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'title',
            label: '内容主题',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'author',
            label: '作者',
          },
          {
            type: 'crawlSl',
            name: 'kind',
            label: '内容类型',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'operator',
            label: '操作人',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_DATEPICKER,
            name: 'publishAt',
            label: '发布时间',
            conf: {
              type: 'datetimerange',
              format: 'yyyy-MM-dd HH:mm:ss',
              'value-format': 'yyyy-MM-dd HH:mm:ss',
              'start-placeholder': '发布开始时间',
              'end-placeholder': '发布结束时间',
            },
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_DATEPICKER,
            name: 'createAt',
            label: '创建时间',
            conf: {
              type: 'datetimerange',
              format: 'yyyy-MM-dd HH:mm:ss',
              'value-format': 'yyyy-MM-dd HH:mm:ss',
              'start-placeholder': '创建开始时间',
              'end-placeholder': '创建结束时间',
            },
          },
        ],
      };
    },
    methods: {
      beforeQuery({ searchInfo }) {
        if (searchInfo.publishAt === null) {
          searchInfo.startTime = '';
          searchInfo.endTime = '';
        } else {
          searchInfo.startTime = searchInfo.publishAt[0];
          searchInfo.endTime = searchInfo.publishAt[1];
        }
        if (searchInfo.createAt === null) {
          searchInfo.createStartTime = '';
          searchInfo.createEndTime = '';
        } else {
          searchInfo.createStartTime = searchInfo.createAt[0];
          searchInfo.createEndTime = searchInfo.createAt[1];
        }
      },
      selectionChange(val) {
        this.selectedData = [...val];
      },
      detail(row) {
        window.open(row.sourceUrl);
      },
      //预处理
      prepare(row) {
        this.$service
          .CrawlContentPrepare({ id: row.id })
          .then((res) => {
            this.$message.success('处理成功');
            this.$refs.crawlList.getList();
          })
          .catch((res) => {
            this.$message.error(res.message);
          });
      },
      edit(row) {
        const { kind } = row;
        const { id } = row;
        this.$tabs.open({ name: 'CrawlDetail', params: { id, kind } });
      },
      //查看上传任务
      showTask(row) {
        this.id = row.id;
        this.$service
          .CrawlContentCheckVideoUpload({ id: row.id })
          .then((res) => {
            this.dialogVisible = true;
            res.status == 'DOWNLOAD_FAIL' || res.status == 'UPLOAD_FAIL'
              ? (res.status = '失败')
              : (res.status = this.$selectFormat['statusText'](res.status).label);
            this.formData = res;
          })
          .catch((err) => {
            if (err && err.code == 400) {
              this.dialogVisible = false;
            }
          });
      },
      //视频重爬
      reCrawl() {
        this.$service.CrawlReloadVideoUrl({ id: this.id }).then((res) => {
          this.dialogVisible = false;
          thid.$message.success('爬取操作成功');
        });
      },
      clear() {
        this.dialogVisible = false;
        this.formData = {};
      },
      // 发布
      publishItem(row) {
        this.$service
          .CrawlContentMarkPublished({ id: row.id })
          .then((res) => {
            this.$message.success('标记为已发布~');
            this.$refs.crawlList.getList();
          })
          .catch((res) => {
            this.$message.error(res.message);
          });
      },
    },
  };
</script>
<style lang="less" scoped></style>
